<script setup lang="js">
import { ref, onBeforeMount } from "vue";
import { Autoplay, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { getProductPage } from "@/http/api/productApi";
import "swiper/css";
import "swiper/css/navigation";

const baseUrl = import.meta.env.VITE_APP_BASE_URL;

const products = ref(null);

const fetchProduct = async () => {
  var params = {
    pageNum: 1,
    pageSize: 20,
    withPic: true,
  };
  getProductPage(params).then(value => {
    products.value = value.data.records;
    console.log("轮播分页请求产品成功", products.value);
  }).catch(error => {
    console.log("轮播分页请求产品失败", error);
  });
};

const getImageUrl = (url) => {
  return baseUrl + url;
}
const onSlideChange = (e) => {
  console.log(e);
}
onBeforeMount(() => {
  fetchProduct();
});
</script>
<template>
  <div class="pro-swiper">
    <swiper
      ref="swiper"
      :slides-per-view="6"
      :space-between="0"
      :centered-slides="true"
      :loop="true"
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :modules="[Autoplay, Navigation]"
      navigation
      @slideChange="onSlideChange"
      v-if="products != null"
    >
      <swiper-slide v-for="(item, index) in products" :key="index">
        <div class="swiper-slide-item">
          <div class="slide-item-img">
            <img
              :src="getImageUrl(item.picPathList[0] ? item.picPathList[0] : '')"
              alt=""
            />
          </div>
          <div class="slide-item-bottom">
            <p class="pro-name">{{ item.productName }}</p>
            <p class="pro-price">$248.75</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<style lang="scss" scoped>
.pro-swiper {
  height: 34.8rem;
  // padding: 0 40px 40px;
  box-sizing: border-box;

  :deep(.swiper-button-prev),
  :deep(.swiper-button-next) {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #72727b;
  }

  :deep(.swiper-button-prev::after),
  :deep(.swiper-button-next::after) {
    color: rgb(113, 113, 122);
    font-size: 16px;
  }

  .swiper-slide-item {
    margin-bottom: 4rem;
    width: 19.2rem;
    height: 29.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    }

    .slide-item-img {
      width: 100%;
      height: 19rem;
      border-bottom: 1px solid #e5e7eb;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .slide-item-bottom {
      padding: 16px;

      .pro-name {
        font-size: 14px;
        line-height: 20px;
      }

      .pro-price {
        margin-top: 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
      }
    }
  }
}
</style>
